<template>
    <p class="p1">

        <van-icon name="arrow-left" size="20px" @click="goback" />
        <span>登录</span>
    </p>
    <div class="login">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="loginname" label="用户名" placeholder="手机号/账户名/邮箱"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    提交
                </van-button>
            </div>
        </van-form>
    </div>
</template>

<script>

export default {
    name: '',
    data() {
        return {
            username: '',
            password: ''

        };
    },
    methods: {
        goback() {
            this.$router.go(-1)
        },
        onSubmit(value) {
            console.log('onSubmit', value);
            this.$http({
                url: '/user/login',
                method: 'post',
                data: value
            }).then(res => {
                if (res.data.code === '200') {
                    sessionStorage.setItem('username', value.loginname)
                    sessionStorage.setItem('userid', res.data.data.userid)
                    sessionStorage.setItem('token', res.data.data.token)

                    const path = this.$route.query.path || "/";
                    this.$router.push(path);
                    alert('登录成功')

                } else if (res.data.code === "10010") {
                    alert('用户名不存在')
                } else if (res.data.code === "10011") {
                    alert('密码错误')
                }
            })
        }
    }
}

</script>
<style scoped>
.p1 {
    width: 100%;
    height: 60px;
    background-color: #fff;
    position: relative;
    top: -16px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}

span {
    margin: 0 auto;
    font-size: 20px;
}
</style>